<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="menu-table" lay-filter="menu-table"></table>
        <div class="bottom" style="background-color: transparent; border: 0px;">
            <div class="button-container">
                <button class="pear-btn pear-btn-primary pear-btn-sm" id="menu-save">
                    <i class="layui-icon layui-icon-sav"></i>
                    保存
                </button>
                <button class="pear-btn pear-btn-sm" id="menu-cancel">
                    <i class="layui-icon layui-icon-refresh"></i>
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    var menu = new Array();
    @for(item in curMenu!){
        menu.push("${item.menuid}");
    @}

    layui.use(['table','jquery','treetable','form'],function () {
        let table = layui.table;
        let $ = layui.jquery;
        let treetable = layui.treetable;
        let form = layui.form;

        let MODULE_PATH = "${ctxPath}/role/";

        window.render = function(){
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'parent',
                skin:'line',
                treeDefaultClose: true,
                elem: '#menu-table',
                url: MODULE_PATH + 'data/menulist',
                page: false,
                defaultToolbar: '',
                height: 'full-70',
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'title', minWidth: 200, title: '菜单名称'},
                    ]
                ],done: function (res, curr, count) {
                    currentArray = res.data;
                    var tbl = $('#menu-table').next('.layui-table-view');
                    for(var i in currentArray) {
                        for(var j in menu) {
                            if(menu[j]==currentArray[i].id) {
                                tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
                            }
                        }
                    }
                    form.render('checkbox');
                    treetable.expandAll("#menu-table");
                }
            });
        }
        render();

        table.on('checkbox()',function (obj) {
            if(obj.checked){
                menu.push(obj.data.id);
            }else{
                for(var i in menu) {
                    if(menu[i]==obj.data.id){
                        menu.splice(i, 1);
                    }
                }
            }
            console.info(menu);
        });

        $("#menu-save").click(function () {
            var roleid = "${roleid}";
            $.ajax({
                url: MODULE_PATH+"data/changeMenu",
                dataType:'json',
                data: {
                    roleid: roleid,
                    menu: menu.join(",")
                },
                type:'post',
                success:function(result){
                    if(result&&result.code==0) {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                    }else{
                        layer.msg(result.message,{icon:2,time:1000});
                    }
                }
            });
        });

        $("#menu-cancel").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
        });
    })
</script>
</body>
</html>